<script setup>
import {reactive, inject} from "vue"
import VueDraggable from "vuedraggable"
import DesignerElementBox from "../Layout/DesignerElementBox.vue"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {},
                children: []
            }
        }
    },
})

const emits = defineEmits(["active", "remove"])
const activeElementId = inject("activeElementId")

/**
 * 拖拽开始的事件
 */
const onStart = () => {
}

/**
 * 拖拽结束的事件
 */
const onEnd = () => {
}

/**
 * 选中元素
 * @param element
 */
const activeElement = (element) => {
    emits("active", element);
}
/**
 * 子组件删除
 * @param element
 */
const onRemove = async (element) => {
    if (element.children && element.children.length > 0) {
        const ok = await $confirmSync("删除节点", "删除当前节点将会一并删除所有子节点，确定删除吗？")
        if (ok) {
            props.elem.children = props.elem.children.filter((el) => el.id !== element.id)
        }
    } else {
        props.elem.children = props.elem.children.filter((el) => el.id !== element.id)
    }

}
</script>

<template>
    <div class="Flex1" @click.stop="activeElement(elem)">
        <DesignerElementBox :is-active="activeElementId === elem.id" @remove="emits('remove', elem)" />
        <VueDraggable :group="{name: 'element', put: true}" :list="elem.children" :sort="true" :style="elem.styleConfig" animation="300" chosen-class="chosenClass" class="move" filter=".unmover" ghost-class="ghost" handle=".move" item-key="id" @end="onEnd" @start="onStart">
            <template #item="{ element }">
                <component :is="('D'+element.type)" :elem="element" @active="activeElement" @remove="onRemove"></component>
            </template>
        </VueDraggable>
    </div>
</template>

<style lang="scss" scoped>
.Flex1 {
    position: relative;

    //&::after {
    //    content: " ";
    //    position: absolute;
    //    top: 0;
    //    left: 0;
    //    bottom: 0;
    //    right: 0;
    //    z-index: 1;
    //    pointer-events: none;
    //    background: transparent;
    //    border: 1px solid #f0f0f0;
    //}

    .move {
        width: 100%;
        height: 100%;
    }
}
</style>